<div style="width:100%;height:100%">
    <div class="content">
        <div class="choose">
            <div class="h3">&nbsp;</div>
            <div style="flex-direction: row;flex-wrap: wrap;display: flex;">
                <!-- 治具类型 -->
                <div class="input_second" style="margin-left: 40px;padding-left:32px;float:right">
                    <div class="titlew">治具類型：</div>
                    <nz-select [nzAllowClear]=false [(ngModel)]="type" [nzDropdownRender]="render2">
                        <nz-option *ngFor="let type of typeList" [nzLabel]=type [nzValue]=type></nz-option>
                    </nz-select>
                    <ng-template #render2>
                        <nz-divider></nz-divider>
                        <div class="add-item" (click)="addType()"> Add item</div>
                    </ng-template>
                </div>
                <!-- 工时类型 -->
                <div class="input_second" style="margin-left: 100px;">
                    <div class="titlew">工時類型：</div>
                    <nz-select [nzAllowClear]=false [(ngModel)]="time" [nzDropdownRender]="render1">
                        <nz-option *ngFor="let item of timeList" [nzLabel]=item [nzValue]=item></nz-option>
                    </nz-select>
                    <ng-template #render1>
                        <nz-divider></nz-divider>
                        <div class="add-item" (click)="addTime()"> Add item</div>
                    </ng-template>
                </div>
            </div>
            <!-- 工时 -->
            <div style="flex-direction: row;flex-wrap: wrap;display: flex;margin-top: 40px;">
                <div class="input_first" style="margin-left: 40px;padding-left:32px;">
                    <div class="titlew">設計：</div>
                    <input type="text" value='' [(ngModel)]='value1'>&nbsp;&nbsp;H
                </div>
                <div class="input_first" style="margin-left: 0px;">
                    <div class="titlew">加工：</div>
                    <input type="text" name='' [(ngModel)]='value2'>&nbsp;&nbsp;H

                </div>
                <div class="input_first" style="margin-left: 0px;">
                    <div class="titlew">二次加工：</div>
                    <input type="text" name='' [(ngModel)]='value3'>&nbsp;&nbsp;H
                </div>
                <div class="input_first" style="margin-left: 0px;">
                    <div class="titlew">組裝：</div>
                    <input type="text" name='' [(ngModel)]='value4'>&nbsp;&nbsp;H
                </div>
            </div>

            <!-- 分割线 -->
            <div class="wrap"></div>

            <!-- 按钮 -->
            <div style="width: 100%;display: flex;padding:30px 0 ;">
                <div style="margin:-3px auto;height: 30px;">
                    <!-- 清除按钮 -->
                    <button class="clear" (click)="clear()"></button>
                    <!-- 保存按钮 -->
                    <button class="save" (click)="save()"></button>
                </div>
            </div>
        </div>
    </div>

    <div class="wrap2"></div>

    <!-- table -->
    <div class="table">
        <nz-table #nzTable [nzShowPagination]=false nzSize="middle" [nzData]="listOfData" [nzScroll]="{ x: '700px', y: '420px' }">
            <thead>
                <tr>
                    <!-- 1) 搜索样式 -->
                    <th nzWidth="150px">&nbsp;&nbsp;&nbsp;&nbsp;治具類型&nbsp;&nbsp;&nbsp;&nbsp;
                        <i nz-icon nzType="search" [nzDropdownMenu]="menu1" nzPlacement="bottom" nzTrigger="click" [nzClickHide]="false" nzTableFilter nz-dropdown></i>
                    </th>
                    <th nzWidth="150px">&nbsp;&nbsp;&nbsp;&nbsp;工時類型&nbsp;&nbsp;&nbsp;&nbsp;
                        <i nz-icon nzType="search" [nzDropdownMenu]="menu2" nzPlacement="bottom" nzTrigger="click" [nzClickHide]="false" nzTableFilter nz-dropdown></i>
                    </th>

                    <th nzWidth="80px">設計</th>
                    <th nzWidth="80px">加工</th>
                    <th nzWidth="80px">二次加工</th>
                    <th nzWidth="80px">組裝</th>
                    <th nzWidth="50px"></th>
                </tr>
            </thead>
            <tbody>
                <tr class="tr_hover" *ngFor="let data of dataList, let Key = index" (click)="edit(data)">
                    <td>{{data.mode}}</td>
                    <td>{{data.type}}</td>
                    <td>{{data.time[0]['value']}}</td>
                    <td>{{data.time[1]['value']}}</td>
                    <td>{{data.time[2]['value']}}</td>
                    <td>{{data.time[3]['value']}}</td>
                    <td>
                        <a class="del" (click)="showModal(data)"></a>
                    </td>
                </tr>
            </tbody>
        </nz-table>

        <!-- 1) 搜索样式 -->
        <!-- 治具搜索 -->
        <nz-dropdown-menu #menu1="nzDropdownMenu">
            <div class="search-box" style="background:#487377; margin-top: -18px;">
                <input type="text" nz-input placeholder="come on" [(ngModel)]="zjtype" />
                <button nz-button nzSize="small" nzType="primary" (click)="search1()" class="search-button">
                    搜索
                </button>
                <button nz-button nzSize="small" (click)="reset1()" class="search-button">
                    重置
                </button>
            </div>
        </nz-dropdown-menu>
        <!-- 工时搜索 -->
        <nz-dropdown-menu #menu2="nzDropdownMenu">
            <div class="search-box" style="background:#487377; margin-top: -18px;">
                <input type="text" nz-input placeholder="come on" [(ngModel)]="timetype" />
                <button nz-button nzSize="small" nzType="primary" (click)="search2()" class="search-button">
                    搜索
                </button>
                <button nz-button nzSize="small" (click)="reset2()" class="search-button">
                    重置
                </button>
            </div>
        </nz-dropdown-menu>

        <!-- 2) 筛选样式 -->

        <!-- 删除弹框 -->
        <nz-modal [(nzVisible)]="isVisible" nzTitle="刪除" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()" [nzMaskStyle]="{backgroundColor:'rbga(48,73,77,.05)'}" [nzBodyStyle]="{height:'200px',background:'rgba(31,46,49,1)',color:'#ffffff',fontSize:'20px',fontWight:'300',textAlign:'center',lineHeight:'200px'}">
            <p style="font-size: 20px;">確定刪除嗎？</p>
        </nz-modal>
    </div>

    <!-- 治具类型添加弹框 -->
    <nz-modal [(nzVisible)]="typeAdd" nzTitle="新增治具類型" (nzOnCancel)="cancelType()" (nzOnOk)="okType()" [nzStyle]="{ top: '130px' }" [nzMaskStyle]="{ backgroundColor:'rbga(48,73,77,.05)'}" [nzBodyStyle]="{height:'200px',background:'rgba(31,46,49,1)',color:'#ffffff',fontSize:'20px',fontWight:'300',textAlign:'center',lineHeight:'200px'}">
        <div class="input_third" style="margin-left: 50px;padding-top: 80px;">
            <!-- <div> -->
            <div class="titlew">治具類型：</div>
            <input type="text" value='' [(ngModel)]='add2'>
        </div>
    </nz-modal>
    <!-- 工时类型添加弹框 -->
    <nz-modal [(nzVisible)]="timeAdd" nzTitle="新增工時類型" (nzOnCancel)="cancelTime()" (nzOnOk)="okTime()" [nzStyle]="{ top: '130px' }" [nzMaskStyle]="{ backgroundColor:'rbga(48,73,77,.05)'}" [nzBodyStyle]="{height:'200px',background:'rgba(31,46,49,1)',color:'#ffffff',fontSize:'20px',fontWight:'300',textAlign:'center',lineHeight:'200px'}">
        <div class="input_third" style="margin-left: 50px;padding-top: 80px;">
            <!-- <div> -->
            <div class="titlew">工時類型：</div>
            <input type="text" value='' [(ngModel)]='add1'>
        </div>
    </nz-modal>
</div>